@skeleton-bg: var(--skeleton-color);
@main-color: var(--main-color);

.c-card {
  --skeleton-color: #f2f2f2;
  --main-color: tomato;

  width: 100%;
  background: white;
  border-radius: 20rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-flow: column;

  .loaded-view {
    width: 100%;
    height: 350rpx;
    background: @skeleton-bg;
  }

  .image {
    width: 100%;
    height: 100%;
  }

  .title {
    padding: 30rpx 20rpx;
    font-size: 26rpx;
    color: #333;
    line-height: 34rpx;
    border-bottom: 1rpx solid #efefef;
  }

  .author {
    padding: 40rpx 20rpx;
    display: inline-flex;

    .avatar {
      width: 70rpx;
      height: 70rpx;
      border-radius: 100%;
      overflow: hidden;
      background: @skeleton-bg;
    }

    .info {
      padding-left: 20rpx;
      flex-grow: 1;
      width: 50%;
    }

    .nickname {
      font-size: 24rpx;
      color: #999;

      .name {
        color: @main-color;
        padding-right: 4rpx;
        font-size: 28rpx;
      }
    }
  }

  .category {
    font-size: 24rpx;
    color: tomato;
  }
}
